<template>
    <div class="app-container">
        <div class="filter-container">
            <el-row type="flex" justify="space-between">
                <el-col :span="6">
                    <el-select class="filter-item" style="width: 180px;"
                               v-model="selectedfilters.equipmenttype"
                               filterable clearable
                               placeholder="Select"
                    >
                        <el-option
                                v-for="(item, index) in optionfilters.equipmenttype"
                                :key="index"
                                :label="item.value"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-select class="filter-item" style="width: 200px;"
                               v-model="selectedfilters.filterplan"
                               filterable
                               @change="selectTrigger(selectedfilters.filterplan)"
                               placeholder="Select"
                    >
                        <el-option
                                v-for="item in optionfilters.filterplan"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-select class="filter-item" style="width: 200px;"
                               v-model="selectedfilters.tool"
                               filterable
                               @change="selectTrigger(selectedfilters.tool)"
                               placeholder="Select"
                    >
                        <el-option
                                v-for="item in optionfilters.tool"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-select class="filter-item" style="width: 200px;"
                               v-model="selectedfilters.moduletype"
                               filterable
                               @change="selectTrigger(selectedfilters.moduletype)"
                               placeholder="Select"
                    >
                        <el-option
                                v-for="item in optionfilters.moduletype"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
            </el-row>

            <el-row type="flex" justify="space-between">
                <el-col :span="6">
                    <el-select class="filter-item" style="width: 200px;"
                               v-model="selectedfilters.recipename"
                               filterable
                               @change="selectTrigger(selectedfilters.recipename)"
                               placeholder="Select"
                    >
                        <el-option
                                v-for="item in optionfilters.recipename"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-select class="filter-item" style="width: 200px;"
                               v-model="selectedfilters.sensoralias"
                               filterable
                               placeholder="Select"
                    >
                        <el-option
                                v-for="item in optionfilters.sensoralias"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <el-button class="filter-item" type="primary" @click="onSearch">Search
                    </el-button>
                    <input
                            ref="excel-upload-input"
                            class="excel-upload-input"
                            type="file"
                            accept=".xlsx, .xls"
                            @change="handleClick"
                    />
                    <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="handleUpload">
                        Import
                    </el-button>
                    <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="onSearch">Export
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <div>
            <!--列表-->
            <el-table
                    v-loading="listLoading"
                    :data="list"
                    border
                    fit
                    highlight-current-row
                    style="width: 100%;overflow:auto"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序号" width="60"></el-table-column>
                <el-table-column prop="department" label="Department" width="140" sortable></el-table-column>
                <el-table-column prop="section" label="Section" width="100" sortable></el-table-column>
                <el-table-column prop="equipmentType" label="Equipment Type " width="160" sortable></el-table-column>
                <el-table-column prop="filterPlan" label="Filter Plan " width="190" sortable></el-table-column>
                <!--                <el-table-column prop="tool" label="Tool" width="120" sortable></el-table-column>-->
                <!--                <el-table-column prop="chamber" label="Chamber" width="120" sortable></el-table-column>-->
                <!--                <el-table-column prop="recipeAlias" label="Recipe Alias" width="140" sortable></el-table-column>-->
                <!--                <el-table-column prop="recipeName" label="Recipe Name" width="140" sortable></el-table-column>-->
                <!--                <el-table-column prop="sensorAlias" label="Sensor Alias" width="140" sortable></el-table-column>-->
                <!--                <el-table-column prop label="Recipe Window" width="140" sortable></el-table-column>-->
                <!--                <el-table-column prop label="Static" width="120" sortable></el-table-column>-->


                <el-table-column min-width="100px" label="CET">
                    <template slot-scope="{row}">
                        <template v-if="row.edit">
                            <el-input v-model="row.cet" class="edit-input" size="small"/>
                        </template>
                        <span v-else>{{ row.cet }}</span>
                    </template>
                </el-table-column>

                <el-table-column min-width="100px" label="CMT">
                    <template slot-scope="{row}">
                        <template v-if="row.edit">
                            <el-input v-model="row.cmt" class="edit-input" size="small"/>
                        </template>
                        <span v-else>{{ row.cmt }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop label="Golden Select" width="140" sortable></el-table-column>
                <el-table-column prop="defaultlevel" label="Default Level" width="120" sortable></el-table-column>
                <el-table-column align="center" fixed="right" label="Actions" width="200">
                    <template slot-scope="{row}">
                        <el-button
                                v-if="row.edit"
                                type="success"
                                size="small"
                                icon="el-icon-circle-check-outline"
                                @click="confirmEdit(row)"
                        >
                            Ok

                        </el-button>
                        <el-button
                                v-if="row.edit"
                                type="success"
                                size="small"
                                icon="el-icon-circle-check-outline"
                                @click="cancelEdit(row)"
                        >Cancel
                        </el-button>
                        <el-button
                                v-else
                                type="primary"
                                size="small"
                                icon="el-icon-edit"
                                @click="row.edit=!row.edit"
                        >
                            Edit
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    layout="total,sizes,prev, pager, next"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :page-size="pagesize"
                    :total="total"
                    style="float:right;"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
    import {getTypeSetup, uploadFile,updateTypeSetup} from "../../api/api"

    export default {
        data() {
            return {
                optionfilters: {
                    equipmenttype: [{value: "DNS1"}, {value: "DNS2"},],
                    filterplan: [{value: "fp1"}, {value: "fp2"}],
                    tool: [{value: "tl1"}, {value: "tl2"}],
                    moduletype: [{value: "md1"}, {value: "md2"}],
                    recipename: [{value: "rn1"}, {value: "rn2"}],
                    sensoralias: [{value: "sr1"}, {value: "sr2"}]
                },
                selectedfilters: {
                    equipmenttype: "",
                    filterplan: "",
                    tool: "",
                    moduletype: "",
                    recipename: "",
                    sensoralias: ""
                },
                querryfilters: {
                    equipmenttype: "",
                    filterplan: "",
                    tool: "",
                    moduletype: "",
                    recipename: "",
                    sensoralias: ""
                },
                downloadLoading: false,
                filename: "",
                list: null,
                total: 0,
                page: 1,
                pagesize: 10,
                listLoading: false,
                sels: [], //列表选中列
                value: true,
                loading: false,
                editVisible: false, //编辑界面是否显示
                //编辑界面数据
                // editForm: {
                //     chamber: ""
                // },

                editItem: [],
                idx: -1,
                editLoading: false,
            };
        },
        mounted() {
            this.getTypeSetupList();
        },
        methods: {
            async getTypeSetupList() {
                let para = {
                    limit: this.pagesize,
                    page: this.page,
                };
                console.log(para,'show paras>>');
                this.listLoading = true;
                const {data} = await getTypeSetup(para)
                const items = data.data.list;
                debugger
                       this.total = data.data.totalCount;
                       this.pagesize = data.data.pageSize;
                this.list = items.map(v => {
                    this.$set(v, 'edit', false)
                    v.originalcet = v.cet
                    console.log(v, '>>>>')
                    return v
                })
                this.listLoading = false;

                // getTypeSetup(para).then(res => {
                //        console.log(res, 'show res!!');
                //        this.total = res.data.data.totalCount;
                //        this.pagesize = res.data.data.pageSize;
                //        this.list = res.data.data.list;
                //        this.listLoading = false;
                //    });
            },
            onSearch() {
                console.log(this.selectedfilters.equipmenttype, "eq");
                // this.filters.equipmenttype = this.form.equipmenttype;
                //   this.getUsers();
                this.$message.success("搜索中..");
            },

            handleUpload() {
                this.$refs["excel-upload-input"].click();
            },

            handleClick(e) {
                let rawFile = new FormData();
                const files = e.target.files;
                const rawFiless = files[0]; // only use files[0]
                this.$refs["excel-upload-input"].value = null;
                rawFile.append('file', rawFiless)
                uploadFile(rawFile).then(res => {
                    console.log(res.data, 'show me res');
                });
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page = val;
                this.getTypeSetupList();
            },
            handleSizeChange(val) {
                this.pagesize = val;
                console.log(`每页 ${val} 条`);
                this.getTypeSetupList();
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            selectTrigger(val) {
                console.log(val, "show val");
            },
            //显示编辑界面
            handleEdit(index, row) {
                this.editItem[index] = {};
                row.isSet = true;
                this.editItem[index] = JSON.parse(JSON.stringify(row));
                console.log(this.editItem, 'show me edit edititem');
            },
            //保存
            handleSave(index, row) {
                // this.editItem[index] = {};
                row.isSet = false;
                // this.editItem[index] = JSON.parse(JSON.stringify(row));
                // console.log(row, 'show me saveRow');
                this.$set(this.typesetuplist, index, row);
                this.editItem[index] = {};

                console.log(this.editItem, 'show me save edititem');
            },
            //取消
            handleCancel(index, row) {
                this.editItem[index].isSet = false;
                this.$set(this.typesetuplist, index, this.editItem[index]);
                this.editItem[index] = {};
                console.log(this.editItem, 'show me Cancel edititem');
            },

            cetcancelEdit(row) {
                row.cet = row.originalcet
                row.edit = false
                this.$message({
                    message: 'The title has been restored to the original value',
                    type: 'warning'
                })
            },
            cancelEdit(row) {
                row.cet = row.originalcet
                row.edit = false
                this.$message({
                    message: 'The title has been restored to the original value',
                    type: 'warning'
                })
            },
            confirmEdit(row) {
                row.edit = false
                // row.originalcet = row.cet
                let  para = {
                    "id": row.id,
                    "cet": row.cet,
                    "cmt": row.cmt
                }
                updateTypeSetup(para).then((res)=>{
                    console.log(res, 'show resupdate')
                })
                this.$message({
                    message: 'The title has been edited',
                    type: 'success'
                })
            }
        },
    };
</script>

<style>
    /*.el-dropdown-link {*/
    /*    cursor: pointer;*/
    /*    color: #409eff;*/
    /*}*/

    /*.el-icon-arrow-down {*/
    /*    font-size: 12px;*/
    /*}*/


    .excel-upload-input {
        display: none;
        z-index: -9999;
    }

</style>
